<template>
  <div class="reset-password-container">
    <h2>重置密码</h2>
    <form @submit.prevent="submitForm">
      <div class="form-control">
        <label for="old_pwd">旧密码:</label>
        <input type="password" id="old_pwd" v-model="resetForm.old_pwd" required />
      </div>
      <div class="form-control">
        <label for="new_pwd">新密码:</label>
        <input type="password" id="new_pwd" v-model="resetForm.new_pwd" required minlength="3" />
      </div>
      <div class="form-control">
        <label for="re_pwd">确认新密码:</label>
        <input type="password" id="re_pwd" v-model="resetForm.re_pwd" required />
      </div>
      <button type="submit" class="submit-button">提交</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { userPasswordUpdateService } from '@/api/user.js';

const resetForm = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
});

const submitForm = async () => {
  if (resetForm.value.new_pwd !== resetForm.value.re_pwd) {
    alert('两次输入的新密码不一致');
    return;
  }
  try {
    const response = await userPasswordUpdateService({
      old_pwd: resetForm.value.old_pwd,
      new_pwd: resetForm.value.new_pwd,
      re_pwd: resetForm.value.re_pwd
    });
    alert('密码重置成功');
  } catch (error) {
    console.error('密码重置失败', error);
    alert('密码重置失败');
  }
};
</script>

<style scoped>
.reset-password-container {
  width: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reset-password-container h2 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 20px;
  color: #333;
  text-align: left;
}

.form-control {
  margin-bottom: 15px;
}

.form-control label {
  display: block;
  margin-bottom: 5px;
  color: #666;
  text-align: left;
}

.form-control input {
  width: 30%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.submit-button {
  width: 10%;
  padding: 10px;
  background-color: #609de2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>